<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部 -->
        <el-row>
          <el-col :span="18">
            <el-form label-width="80px" size="small" :inline="true">
              <el-form-item label="关键字">
                <el-input v-model="query.keyword" style="200px" placeholder="根据编号搜索" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button @click="resetFn">清除</el-button>
            <el-button type="primary" @click="choseFn">搜索</el-button>
          </el-col>
        </el-row>

        <!-- 警告条 -->
        <div class="zs">
          <el-alert :title="`数据一共 ${total} 条`" type="info" show-icon :closable="false" />
        </div>

        <!-- 表格 -->
        <el-table :data="list" label-width="100%" :header-cell-style="{ background: '#fafafa' }">
          <el-table-column prop="id" label="编号" width="220" />
          <el-table-column prop="questionType" label="题型" width="110">
            <!-- 题型 -->
            <template slot-scope="scope">
              <p v-if="scope.row.questionType === '1'">单选</p>
              <p v-else-if="scope.row.questionType === '2'">多选</p>
              <p v-else>简答</p>
            </template>
          </el-table-column>

          <el-table-column prop="questionIDs.0.number" label="题型编号" width="222">
            <template #default="{ row }">
              <!-- {{ row.questionIDs }} -->
              <div
                class="color"
                v-for="item in row.questionIDs"
                :key="item.index"
                @click="open(item.id)"
              >
                {{ item.number }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" width="180" label="录入时间" />
          <el-table-column prop="totalSeconds" width="150" label="答题时间(s)" />
          <el-table-column prop="accuracyRate" width="160" label="正确率(%)" />
          <el-table-column prop="userName" width="150" label="录入人" />
          <el-table-column prop="operation" label="操作">
            <!-- 删除 -->
            <template #default="{ row }">
              <el-button type="danger" plain icon="el-icon-delete" circle @click="delRandom(row)" />
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <!--
            size-change：页容量发生改变后会触发的事件
            current-change：当前页发生改变后会触发的事件
            current-page：当前页
            page-sizes：页容量的集合
            page-size：选中的页容量
            layout：分页组件的布局
            total：数据的总条数
           -->
        <div class="block">
          <el-pagination
            background
            :current-page="query.page"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="query.pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <!-- 题目预览 -->
      <questionsPreview ref="myPre" :show.sync="show"></questionsPreview>
    </div>
  </div>
</template>

<script>
// 导入组件
import { randoms, removeRandoms } from '@/api/hmmm/questions'
// 导入子组件
import questionsPreview from '../components/questions-preview.vue'
export default {
  data () {
    return {
      questionItem: {},
      dialogVisible: false,
      // 控制弹层显隐
      show: false,

      // 输入框内容
      input: '',
      // 获取到的组题数据
      list: [],
      // 存储题目编号
      // titleNumber: [],
      total: 0,
      query: {
        page: 1, // 当前页面
        pagesize: 10, // 每条页数
        keyword: '' // 关键字
      },
      // 控制题目预览的显示与隐藏
      PreviewShow: false,
      // 输入框
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  // 注册组件
  components: {
    questionsPreview
  },
  // 数据
  created () {
    this.randomsFn()
  },

  // 题库列表
  methods: {
    // 打开子组件弹层
    open (id) {
      this.show = true
    },
    async randomsFn () {
      const { data } = await randoms(this.query)
      this.list = data.items
      this.total = data.counts
    },
    // 清除输入框
    resetFn () {
      this.formInline.user = ''
      this.query.keyword = ''
      this.randomsFn()
      this.query.page = 1
      this.query.pagesize = 10
    },
    // 分页每页条数改变
    handleSizeChange (sizes) {
      // sizes： 当前需要每页显示的条数
      this.query.pagesize = sizes
      this.randomsFn()
    },
    // 当前页码改变时触发
    handleCurrentChange (nowPage) {
      // nowPage: 当前要看的第几页,页数
      this.query.page = nowPage
      this.randomsFn()
    },
    // 搜索按钮
    choseFn () {
      this.query.page = 1
      this.query.pagesize = 10
      this.randomsFn()
    },
    // 删除
    delRandom (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms(row)
          this.$message.success('删除成功')
          this.randomsFn()
        })
        .catch(() => { })
    },
    // 预览
    async preview (id) {
      try {
        const { list } = await removeRandoms.detail({ id })
        this.questionItem = list
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    }
  }
}
</script>

<style scoped>
.zs {
  margin-bottom: 14px;
}
.block {
  float: right;
  margin: 20px 0px;
}
.color {
  color: rgb(0, 153, 255);
  cursor: pointer;
}
</style>
